<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="Light" src="../img/010.jpeg" width="200" height="120"><br>

<div class="cls">传智教育</div>
<div class="cls">黑马程序员</div>

<input type="checkbox" name="hobby">电影
<input type="checkbox" name="hobby">旅游
<input type="checkbox" name="hobby">游戏
<br>

<script>

    /*
    *   获取：使用Document对象的方法来获取
    *       * getElementById：根据id的属性值来获取，返回一个Element数组对象
    *       * getElementsByTagName:根据标签名称获取，返回Element对象数组
    *       * getElementsByName:根据name属性值获取，返回Element对象数组
    *       * getElementsByClassName:根据class属性值获取，返回Element对象数组
    *
    * */
    //1.getElementById：根据id的属性值来获取，返回一个数组对象
    let img = document.getElementById("Light");
    document.write(img);


    //2.getElementsByTagName:根据标签名称获取，返回Element对象数组
    let divs = document.getElementsByTagName("div");
    // document.write(divs.length);
    /*for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }*/


    //3.getElementsByName:根据name属性值获取，返回Element对象数组
    let hobbys = document.getElementsByName("hobby");
   /* for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);
    }*/

    //4.getElementsByClassName:根据class属性值获取，返回Element对象数组
    let clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);
    }


</script>

</body>
</html>